<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/style1.css" type="text/css" />
	<title>Roles編輯頁</title>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.validate.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.metadata.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.selectboxes.min.js"></script>
	<script type="text/javascript">
	var ItemObj = null;
	var ItemJsonData = null;
	function reselectAccount(data) {
		var obj = JSON.parse(data);
		var selObj = $('td select[name="vo.accounts"]');
		selObj.removeOption(/./);	// don't use empty() or html('')
		$.each(obj, function(i) {
			selObj.addOption(
					obj[i].userid,
					obj[i].username);
		});
	};

	function reselectFunction(data) {
		ItemJsonData = data;
		var obj = JSON.parse(data);
		ItemObj = obj;
		var selObj = $('td select[name="vo.functions"]');
		selObj.removeOption(/./);	// don't use empty() or html('')
		$.each(obj, function(i) {
			$('td select[name="vo.functions"]').addOption(
					obj[i].funcid,
					obj[i].funcname);
		});
		$('td select[name="vo.functionItems"]').removeOption(/./);
		selObj.add('option:first').attr('selected', 'selected');
		$('select[name="vo.functions"] option:first').trigger('change');
	};

	function setSubmit(opValue) {
	    role_id = $('td input[name="vo.id"]').val();
	    window.showModalDialog(
	    	    '<c:out value="${ctx}"/>/' + opValue + '.do?role_id=' + role_id,
	    	    window,
	    	    'dialogWidth=900px;dialogHeight=360px;toolbar=no;resizable=no;scrollbars=yes');
	};

	function buildSelectBox(data) {
		$('td select[name="vo.functionItems"]').empty();
		$.each(data, function(i) {
			$('td select[name="vo.functionItems"]').addOption(
					data[i].id,
					data[i].itemname
						+ '--' + (data[i].visable == 'N' ? '隱藏' : '顯示')
						+ '--' + (data[i].enable == 'N' ? '失效' : '生效'));
		});
	};

	function selectAll() {
		$('select[name="vo.accounts"]').each(function() {
			$(this).children('option').attr("selected", "selected");
		});
		if (ItemJsonData != null) {
			$('#functionJson').attr('value', ItemJsonData);
		} else {
			$('#functionJson').attr('value', '*');
		}
	};

	$(function() {
		$('td select[name="vo.functions"]').change(function(){
			function_id = $(this).val();
			role_id = $('td input[name="vo.id"]').val();
//			alert(role_id + '/' + function_id);
			if (null == ItemObj) {
				$.ajax({
					url: '<c:out value="${ctx}"/>/ajaxRoleQueryFunctionItem.do',
					type: 'POST',
					data: "function_id=" + function_id + "&role_id=" + role_id,
					dataType: 'json',
					success: function(data, status){
						buildSelectBox(data);
					},
					error: function(xhrInstance, status, xhrException) {
						alert("failure:" + status);
//						alert(xhrException);
					}
				});
			} else {
				var obj = ItemObj;
				$.each(obj, function(i) {
					if (function_id == obj[i].funcid) {
						var data = obj[i].items;
						buildSelectBox(data);
						return;		// don't use break if it doesn't work in IE8 and FF3
					}
				});
			}
			return false;
		});
	});

	/**
	 * decorate datePicker on every _date and Key/Data area disable
	 */

	$(function() {
		$('td select[name!="vo.enable_flag"]').addClass('blue');
		// Area update
		$('td input[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		$('td select[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		// $('td input[name="vo.id"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="key" />');
		$('td input[name="vo.id"]').attr('disabled', 'disabled');
		// Initial Select Box
		$('td select[name="vo.accounts"]').empty();
		<c:forEach items="${lazyForm.map.vo.accounts}" var="acc" varStatus="status" >
			$('td select[name="vo.accounts"]').addOption(
				'<c:out value="${acc.id}" />',
				'<c:out value="${acc.name_tw}" />');
		</c:forEach>

		$('td select[name="vo.functions"]').empty();
		<c:forEach items="${lazyForm.map.vo.functions}" var="fun" varStatus="status" >
			$('td select[name="vo.functions"]').addOption(
				'<c:out value="${fun.id}" />',
				'<c:out value="${fun.functionname}" />');
		</c:forEach>
		//$('select[name="vo.functions"]').val($('select[name="vo.functions"] option:first').val());
		$('select[name="vo.functions"] option').each(function() {
			$(this).attr('selected', '');
		});
		$('select[name="vo.functions"] option:first').attr('selected', 'selected');
		$('select[name="vo.functions"] option:first').trigger('change');
		$('td select[name="vo.functionItems"]').empty();
		
		if('update'=='<bean:write name="lazyForm" property="op"/>'){
			$("#rolename").attr("readonly","readonly");
		}
		
		$("#mainForm").validate({
			meta: "validate",
			messages:{
				'vo.rolename':{
					required:"請輸入群組名稱"
				}	
			}
		});

	});

	</script>
</head>
<body>
<form id="setForm" name="setForm" method="post">
	<input type="hidden" name="role_id" id="role_id"/>
</form>
<form id='mainForm' name='mainForm' action='<c:out value="${ctx}"/>/saveRole.do' method="post">
	<html:hidden property="op" name="lazyForm"/>
	<input type="hidden" id="functionJson" name="functionJson"/>
	<div id="DataArea">
	<table width="100%" border="0">
		<tr>
			<th class="th" colspan="6" >編輯區 </th>
			</tr>
		<tr>
			<td class="title" width="14%">群組代碼</td>
			<td class="one"   width="16%"  ><html:text name="lazyForm" property="vo.id" size="20"/></td>
			<td class="title" width="14%">群組名稱</td>
			<td class="one"   width="16%"  ><html:text name="lazyForm" styleClass="{validate:{required:true}}" property="vo.rolename" size="20"/></td>
			<td class="title" width="14%">啟動旗標</td>
			<td class="one">
				<html:select name="lazyForm" property="vo.enable_flag">
					<html:option value="Y">是</html:option>
					<html:option value="N">否</html:option>
				</html:select>
			</td>
		</tr>
		<tr>
		  <td class="one" colspan="6">
		  <p></p>
			<!-- 在<option>標籤中加入 selected  選取預設值-->
			<html:select property="vo.accounts" name="lazyForm" size="6" multiple="multiple"/>
			<input type="button" name="popupAccount2Role" id="popupAccount2Role" value="設定" onclick="setSubmit(this.name);"/></td>
			</tr>
			<tr>
			  <td class="one" colspan="6">
			  	<html:select property="vo.functions" name="lazyForm" size="6" multiple="multiple"/>
				&nbsp;
				<html:select property="vo.functionItems" name="lazyForm" size="6" multiple="multiple"/>
			<input type="button" name="popupRole2Function" id="popupRole2Function" value="設定"  onclick="setSubmit(this.name);"/></td>

		</tr>
	</table>
	</div>
	<div id="send">
		<input type="submit" name="save" id="save" value="儲存" onclick="selectAll()"/>
		<input type="button" name="back" id="back" value="上一頁" onclick="history.go(-1);" />
	</div>
</form>
</body>
</html:html>